<template>
  <div class="pay-success">
    <div class="logo">
      <img src="@/assets/zhifuchenggong.png">
      <p>支付成功</p>
    </div>
    <div class="goods" v-if="info.length > 0">
      <p class="title" v-show="info.length == '1'">{{info.title}}</p>
      <p class="title" v-show="info.length > 1">购物车商品购买成功</p>
      <p class="price">
        {{info.allprice}}<em>元</em>
      </p>
    </div>
    <div class="goods" v-else>
      <p class="title">{{exam.title}}  |  一次</p>
      <p class="price">
        {{exam.price}}<em>元</em>
      </p>
    </div>
    <div class="btn" v-if="info.length > 0">
      <span @click="router({path: './person'})">返回</span>
      <p class="tip">订单可在“个人中心-全部订单”中查看</p>
    </div>
    <div class="btn" v-else>
      <span @click="router({path: './examStart', query:{article_type: exam.type, miyao: exam.miyao}})">立即测试</span>
    </div>
  </div>
</template>

<script>
import { getOrderDetails, examIndex } from '@/api/api'
export default {
  data () {
    return {
      info: {},
      exam: {},
    }
  },
  created () {
    this.uid = sessionStorage.getItem('uid')
    if(this.$route.query.order_id){
      this.order_id = this.$route.query.order_id
      this.get_order_details()
    }else if(this.$route.query.type){
      this.article_type = this.$route.query.type
      this.exam_index()
    }
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    get_order_details() {
      getOrderDetails(this.uid, this.order_id).then((res) => {
        this.info = res.data.info,
        this.info.allprice = res.data.url.total_price
      }).catch((err) => {
        console.log(err)
      })
    },
    exam_index() {
      examIndex(this.uid, this.article_type).then((res) => {
        this.exam = res.data.info;
      }).catch((err) => {
        console.dir(err)
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
  .logo
    text-align center
    padding-top 4rem
    img
      width 4.3rem
      height 4.3rem
      display inline-block
    p
      font-size 1.5rem
      color #43A047
  .goods
    text-align center
    margin-top 10rem
    .title
      color #333333
      font-size 1.5rem
      line-height 3rem
      margin-bottom 1rem
    .price
      color #333
      font-size 4rem
      font-weight bold
      em
        font-size 2rem
        line-height 2.2rem
        font-weight 400
  .btn
    position fixed
    bottom 4.8rem
    text-align center
    width 100%
    span
      width 18rem
      height 3.6rem
      border 1px solid #43A047
      border-radius 100px
      color #43A047
      margin-bottom 1.5rem
      display inline-block
      line-height 3.6rem
      text-align center
      font-size 1.5rem
    .tip
      color #999
      font-size 1.3rem
      text-align center
</style>